<template>
  <a-config-provider :locale="locale">
    <div id="app" style="height: 100%">
      <keep-alive><router-view></router-view></keep-alive>
      <!-- <router-view></router-view> -->
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import { updateTheme } from "@/pro-layout/utils/dynamicTheme";
import defaultSettings from "@/config/defaultSettings";
import { mapState, mapActions } from "vuex";
export default {
  name: "App",
  data () {
    return {
      locale: zhCN
    };
  },
  computed: {
    ...mapState(["isPro"])
  },
  watch: {
    isPro (newValue, oldValue) {
      if (newValue != oldValue) {
        // updateTheme(newValue ? '#5697f5' : defaultSettings.primaryColor);
      }
    }
  },
  mounted () {
    console.log("this.isPro", this.isPro);
    // updateTheme(this.isPro ? '#5697f5' : defaultSettings.primaryColor);
  },
  created () {
    this.GetInfo();
  },
  methods: {
    ...mapActions(["GetInfo"])
  }
};
</script>
<style lang="less">
@primary-color: "#5697f5";
</style>
<style type="text/css">
@import "assets/reset.css";
/* @import 'assets/login.css'; */
/* 基础字体图标 */
@import "/baseFont/iconfont.css";
/* 菜单字体图标 */
@import "/menuFont/iconfont.css";

a {
  color: #5697f5;
}

/* 进度条颜色 */
#nprogress .bar {
  background: #00bec5 !important;
}

.tooltipColor .ant-tooltip-inner {
  background-color: #00bec5;
  color: #ffffff;
  width: 440px;
  padding: 0 20px;
  border-radius: 10px;
  max-height: 500px;
  overflow: auto;
}

/* 小三角的颜色 */
.tooltipColor .ant-tooltip-arrow::before {
  background-color: #00bec5;
}

.tooltipColor .popover-hd {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
}

.tooltipColor .popover-bd {
  width: 400px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: normal;
}

/* 正式版小三角的颜色 */
.tooltipColor_official .ant-tooltip-inner {
  background-color: #5697f5;
  color: #ffffff;
  width: 440px;
  padding: 0 20px;
  border-radius: 10px;
  max-height: 500px;
  overflow: auto;
}

/* 小三角的颜色 */
.tooltipColor_official .ant-tooltip-arrow::before {
  background-color: #5697f5;
}

.tooltipColor_official .popover-hd {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
}

.tooltipColor_official .popover-bd {
  width: 400px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: normal;
}
</style>
<style scoped="scoped" lang="less">
#app {
  // font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;

  /deep/ .table-wrapper .operation {
    line-height: 1;

    a {
      &.del {
        color: @warning-color;
      }

      &.edit {
        color: @primary-color;
      }

      &.set {
        color: #5480db;
      }
    }

    a + a {
      margin-left: 12px;
    }
  }
}

.primaryColor {
  color: @primary-color !important;
}

.mt10 {
  margin-top: 10px;
}

p {
  margin-bottom: 0;
}

/deep/ .ant-btn-link {
  border: 0 solid transparent !important;
}

/deep/ .ant-menu-inline-collapsed > .ant-menu-item .iconfont + span,
/deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .iconfont + span,
/deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .iconfont + span,
/deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .iconfont + span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
}

/deep/ .ant-menu-item-selected.ant-menu-item:hover,
.ant-menu-item-active.ant-menu-item-selected {
  color: #fff !important;
}
/deep/ .ant-table-header {
  // 手动的添加隐藏样式
  overflow-y: hidden !important;
  // 设置表头右侧内边距 手动对齐
  padding-right: 6px;
}
/deep/ .ant-table .ant-table-row:nth-child(even) td {
  /* background: #f4f5f8; */
}

/deep/ .ant-table-thead > tr > th {
  background: #ebf3f9;
  padding: 12px 16px;
  border-bottom: none;
}

/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-placeholder {
  //border-bottom: none;
}

/deep/ .ant-table .ant-table-row td.ant-table-row-cell-break-word {
  white-space: normal;
}

/deep/ .tag {
  width: 52px;
  height: 24px;
  border: 1px solid @primary-color;
  color: @primary-color;
  border-radius: 4px;
  display: inline-block;
  text-align: center;

  &.active {
    border: 1px solid @warning-color;
    color: @warning-color;
  }
}

/* 分页样式 */
/deep/.ant-pagination-item {
  width: 48px;
}

/deep/.ant-pagination-item:focus a,
/deep/ .ant-pagination-item:hover a,
/deep/ .ant-pagination-item-active a {
  background: @primary-color;
  color: #fff;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
